<div id="pathAnalysis" v-cloak>
        <row>
                <i-col span="12">
                    <Date-picker @on-change="handleChange" :options="dateoption" type="date" format="yyyy-MM-dd" placeholder="选择日期" style="width: 200px"></Date-picker>
                </i-col>
                <i-col class="endDate" span="12">
                    <Date-picker @on-change="endChange" :options="dateoption" type="date" format="yyyy-MM-dd"  placeholder="选择日期" placement="bottom-end" style="width: 200px"></Date-picker>
                </i-col>
        </row>
    <div class="path-tables">
        <i-table class="path-tables-table" highlight-row height="300" :columns="pathColumns_old" :data="pathTableDataNew"
            @on-row-click="getSelectPath"></i-table>
        <i-table class="path-tables-table" highlight-row height="300" :columns="pathColumns" :data="pathTableDataOld"
            @on-row-click="getSelectPath"></i-table>
        <div style="width:100%">
            <parent></parent>
            <div id="totalChart2" class="echart-class">
                
            </div>
        </div>
    </div>
    <div id="pathAnalysisMap">
        
    </div>
</div>
<style>
    .endDate{
    width:20%;
    margin-right:0px;
    }
    #button-list{
    z-index: 2;
    display: flex;
    width: 100%;
    }
    #button-list > button{
    width: 25vw;
    }
    #pathAnalysisMap {
        height: 100vh;
    }

    #pathAnalysis {
        display: absolute
    }

    .path-tables {
        display: block;
        position: relative;
        float: right;
        width: 30%;
    }

    .path-tables-table {
        display: contents
    }

    .path-data-select {
        width: 200px;
    }

    .echart-class {
        width: 100%;
        position: adsolute;
        /* background: red; */
        height: 300px;
        float: left;
    }
</style>
<!-- <script type="text/javascript" src="../../node_modules/axios/dist/axios.js"></script> -->
<script type="text/javascript" src="JS/page/logistics/pathAnalysis.js"></script>